import React from 'react';
import { Layout } from 'antd';
import { Menu } from 'antd';
import { SettingOutlined, UserOutlined } from "@ant-design/icons"
import { Outlet, useNavigate } from "react-router-dom"
const { Sider, Content } = Layout;

interface Props {

}
interface MenuItem {
    item: object
    key: string
}
function Systemmanage(props: Props) {
    var navigate = useNavigate()
    var handleClick = function ({ item, key }: MenuItem) {
        console.log(key);
        navigate(key)
    }
    return (

        <Layout className='systemmanage'>
            <Sider theme='light'>
                <Menu className='mymenu' theme='light' mode='inline' defaultSelectedKeys={['/index/systemmanage/realtime_data']} onClick={handleClick}>
                    <Menu.Item key="/index/systemmanage/realtime_data" >实时数据</Menu.Item>
                    <Menu.SubMenu key="SubMenu" title="历史数据" icon={<UserOutlined />} >
                        <Menu.Item key="/index/systemmanage/overview" >总览</Menu.Item>
                        <Menu.Item key="2" >坐席报表</Menu.Item>
                        <Menu.Item key="3" >留言报表</Menu.Item>
                    </Menu.SubMenu>
                </Menu>

            </Sider>
            <Content style={{ padding: 20 }}>
                <Outlet></Outlet>
            </Content>
        </Layout>
    );
}

export default Systemmanage;